<template>
  <div class="wrap">
    <div class="header">
      <template v-if="data">
        <div class="box-card">
          <div class="title">代发服务费</div>
          <div class="info">
            <div class="line">
              <div class="label">单量阶梯：</div>
              <div class="text">
                <template v-if="data.shippingServer.length === 0">
                  -
                </template>
                <template v-else-if="data.shippingServer.length === 1">
                  ≥ {{data.shippingServer[0].orderNum}} 单，{{row.shippingServer[0].price}} 元/单
                </template>
                <template v-else>
                  <el-tooltip placement="right">
                    <template #content>
                      <div v-for="item in data.shippingServer" :key="item.orderNum">
                        ≥ {{item.orderNum}} 单，{{item.price}} 元/单
                      </div>
                    </template>
                    <div>
                      {{data.shippingServer.length}}个阶梯 <i class="el-icon-question font-blue"></i>
                    </div>
                  </el-tooltip>
                </template>
              </div>
            </div>
            <div class="line">
              <div class="label">当前阶梯：</div>
              <div class="text"> {{shippingStep.price}} 元/单</div>
            </div>
            <div class="line">
              <div class="label">本月单数：</div>
              <div class="text">
                {{stickerNum}}
                <template v-if="stickerList.length > 1">
                  <el-tooltip placement="right" style="display: inline-block">
                    <template #content>
                      <div v-for="item in stickerList" :key="item.accountType">
                         {{item.accountType}}：{{item.num}} 单
                      </div>
                    </template>
                    <div>
                      <i class="el-icon-question font-blue"></i>
                    </div>
                  </el-tooltip>
                </template>

              </div>
            </div>
            <div class="line">
              <div class="label">本月代发费：</div>
              <div class="text">{{stickerFee}}</div>
            </div>


          </div>
        </div>
        <div class="box-card">
          <div class="title">头程服务费</div>
          <div class="info">
            <div class="line">
              <div class="label">基础费用：</div>
              <div class="text">{{data.FLServer.votePrice}} 元/票</div>
            </div>
            <div class="line">
              <div class="label">每箱费用：</div>
              <div class="text">{{data.FLServer.boxPrice}} 元/箱</div>
            </div>
            <div class="line">
              <div class="label">本月票数：</div>
              <div class="text">{{FLShipment.count}} </div>
            </div>
            <div class="line">
              <div class="label">本月箱数：</div>
              <div class="text">{{FLShipment.boxNum}} </div>
            </div>
            <div class="line">
              <div class="label">本月头程费：</div>
              <div class="text">{{FLShipmentFee}}</div>
            </div>
          </div>
        </div>

        <div class="box-card">
          <div class="title">送仓服务费</div>
          <div class="info">
            <div class="line">
              <div class="label">基础费用：</div>
              <div class="text">{{data.sendWarehouseServer.votePrice}} 元/票</div>
            </div>
            <div class="line">
              <div class="label">每箱费用：</div>
              <div class="text">{{data.sendWarehouseServer.boxPrice}} 元/箱</div>
            </div>
            <div class="line">
              <div class="label">本月票数：</div>
              <div class="text">{{middleOrder.count}} </div>
            </div>
            <div class="line">
              <div class="label">本月箱数：</div>
              <div class="text">{{middleOrder.boxNum}} </div>
            </div>
            <div class="line">
              <div class="label">本月送仓费：</div>
              <div class="text">{{middleFee}}</div>
            </div>
          </div>
        </div>

        <div class="box-card">
          <div class="title">贴标服务费</div>
          <div class="info">
            <div class="line">
              <div class="label">基础费用：</div>
              <div class="text">{{data.labelServer.votePrice}} 元/票</div>
            </div>
            <div class="line">
              <div class="label">每张费用：</div>
              <div class="text">{{data.labelServer.labelPrice}} 元/张</div>
            </div>
            <div class="line">
              <div class="label">本月票数：</div>
              <div class="text">{{labelOrder.count}} </div>
            </div>
            <div class="line">
              <div class="label">本月贴标数：</div>
              <div class="text">{{labelOrder.labelNum}} </div>
            </div>
            <div class="line">
              <div class="label">本月贴标费：</div>
              <div class="text">{{labelFee}}</div>
            </div>
          </div>
        </div>
      </template>


    </div>
    <div class="content">
      <div class="search-box">
        <div class="left">
          <diy-date :date-type="2" v-model="queryParams.times" @change="changeOption"></diy-date>
        </div>
        <div class="right">
          <export-button :func="exportDataByTimes" :query-params="queryParams" :get-total="1"></export-button>
        </div>
      </div>
      <el-tabs v-model="tab" @tab-click="changeOption">
        <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabList" :key="item.name"></el-tab-pane>
      </el-tabs>
      <div class="table" v-loading="loading">
        <template v-if="tab === 'order'">
          <sticker-order-table :table-data="tableData"></sticker-order-table>
        </template>
        <template v-else-if="tab === 'FLShipment'">
          <f-l-shipment-table :table-data="tableData"></f-l-shipment-table>
        </template>
        <template v-else-if="tab === 'middleOrder'">
          <middle-order-table :table-data="tableData"></middle-order-table>
        </template>
        <template v-else-if="tab === 'labelOrder'">
          <label-order-table :table-data="tableData"></label-order-table>
        </template>
      </div>
      <el-pagination
        style="display: inline-block"
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-size.sync="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100, 500, 1000]"
        :total="total"
        layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  exportDataByTimes,
  getFLShipmentList,
  getLabelOrderList,
  getMiddleOrderList,
  getMiddlePrice,
  getStickerOrderList
} from "@/api/middle";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import ExportButton from "@/views/order/components/ExportButton.vue";
import StickerOrderTable from "@/views/middle/components/StickerOrderTable.vue";
import FLShipmentTable from "@/views/middle/components/FLShipmentTable.vue";
import MiddleOrderTable from "@/views/middle/components/MiddleOrderTable.vue";
import LabelOrderTable from "@/views/middle/components/LabelOrderTable.vue";

export default {
  name: "middleDataSettlement",
  components: {LabelOrderTable, MiddleOrderTable, FLShipmentTable, StickerOrderTable, ExportButton, DiyDate},
  data(){
    return {
      data: {
        shippingServer: [], // 代发服务费
        FLServer: {
          boxPrice: 0,
          votePrice: 0,
        }, // 头程货件单收费
        labelServer: {
          labelPrice: 0,
          votePrice: 0,
        }, // 贴标收费
        sendWarehouseServer: {
          boxPrice: 0,
          votePrice: 0,
        }, // 送仓收费
      },
      FLShipment: {
        boxNum: 0,
        count: 0,
      }, // 货件单
      labelOrder: {
        count: 0,
        labelNum: 0,
      }, // 贴标
      middleOrder: {
        boxNum: 0,
        count: 0,
      }, // 送仓
      stickerList: [], // 代发各个平台
      queryParams: {
        page: 1,
        pageSize: 20,
        times: [],
      },
      tab: 'order',
      tabList: [
        {label: '代发数据', name: 'order'},
        {label: '头程数据', name: 'FLShipment'},
        {label: '送仓数据', name: 'middleOrder'},
        {label: '贴标数据', name: 'labelOrder'},
      ],
      tableData: [],
      total: 0,
      loading: false,
    }
  },
  created() {
    this.getPrice()
    this.getData()
  },
  computed:{
    // 贴单总数量
    stickerNum(){
      return this.stickerList.reduce((total, item)=>{
        return total + item.num
      }, 0)
    },
    // 当前对应的阶梯
    shippingStep(){
      let obj = {
        orderNum: 0,
        price: 0,
      }
      if(this.data.shippingServer){
        this.data.shippingServer.every(item=>{
          if(this.stickerNum >= item.orderNum){
            obj = item
            return true
          }
          return false
        })
      }

      return obj
    },
    stickerFee(){
      return (this.shippingStep.price * this.stickerNum).toFixed(2)
    },
    FLShipmentFee(){
      let num1 = this.FLShipment.count * this.data.FLServer.votePrice
      let num2 = this.FLShipment.boxNum * this.data.FLServer.boxPrice
      return (num1 + num2).toFixed(2)
    },
    // 中转费用（送仓费用）
    middleFee(){
      let num1 = this.middleOrder.count * this.data.sendWarehouseServer.votePrice
      let num2 = this.middleOrder.boxNum * this.data.sendWarehouseServer.boxPrice
      return (num1 + num2).toFixed(2)
    },
    labelFee(){
      let num1 = this.labelOrder.count * this.data.labelServer.votePrice
      let num2 = this.labelOrder.labelNum * this.data.labelServer.labelPrice
      return (num1 + num2).toFixed(2)
    }
  },
  methods: {
    exportDataByTimes,
    getPrice(){
      getMiddlePrice()
        .then(res=>{
          if(res.data){
            this.data = res.data
          }
          this.FLShipment = res.info.FLShipment
          this.labelOrder = res.info.labelOrder
          this.middleOrder = res.info.middleOrder
          this.stickerList = res.info.stickerList
        })
    },
    getData(){
      this.loading = true
      let func = getStickerOrderList
      if(this.tab === 'FLShipment'){
        func = getFLShipmentList
      }else if(this.tab === 'middleOrder'){
        func = getMiddleOrderList
      }else if(this.tab === 'labelOrder'){
        func = getLabelOrderList
      }
      func(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1
      this.getData()
    }
  },
}
</script>


<style scoped lang="scss">
.wrap{
  padding: 20px;
  .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    .box-card{
      width: 23%;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      padding: 10px;
      height: auto;
      .title{
        font-size: 16px;
        font-weight: bold;
        color: #3bafda;
      }
      .info{
        margin-top: 10px;
        font-size: 15px;
        font-weight: 500;
        .line{
          display: flex;
          margin-bottom: 10px;
          .label{
            width: 100px;
          }
        }
      }

    }
  }
  .content{
    margin-top: 20px;
    .search-box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }

}

</style>
